<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <meta name="baidu-site-verification" content="code-5VrlFsNM5b" />
      <title>选择角色</title>
      <link rel="stylesheet" type="text/css" href="__CSS__/api.css"/>
      <style>
          html,body{
            width:100%;
            height:100%;
          }
          body{
            background:rgba(0,0,0,0.4);

          }
          .box{
            width:380px;
            height:466px;
            background:#fff;
            border-radius:4px;
            position: absolute;
            top:0;
            left:0;
            bottom:0;
            right:0;
            margin:auto;
            padding:0 45px 0 35px;
            box-sizing: border-box;
          }
          .title{
            font-size:20px;
            font-weight:600;
            color:#101C37;
            margin-top:32px;

          }
          .arrow{
            width:16px;
            height:16px;
            position: absolute;
            top:24px;
            right:20px;
            cursor: pointer;
          }

          .btn{
            width:100%;
            height:50px;
            line-height: 50px;
            text-align: center;
            font-size:16px;
            color:#fff;
            font-family:PingFangSC-Medium;
            font-weight:500;
            background: #3463E6;
            border-radius:4px;
            cursor: pointer;
          }
          .outer{
            width:100%;
            /*padding-left:29px;*/
            /*padding-right:19px;*/
            margin-bottom:79px;
            margin-top:110px;
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
          }

          .imgBox{
            width:96px;
            height:96px;
            position: relative;
          }
          .roleImg{
            width:100%;
            height:100%;
          }
          .chooseImg{
            width:24px;
            height:24px;
            position: absolute;
            right:11px;
            bottom:-3px;
          }
          .roleName{
            width:96px;
            text-align: center;
            color:#333;
            font-size:15px;
            margin-top:10px;
          }
          .bluee{
            color:#3463E6;
          }
          .hidden{
            display: none;
          }
      </style>
  </head>
  <body>
    <div class="box">
      <div class="title">选择角色</div>
      <img src="__IMG__/arrow.png" alt="" class="arrow" onclick="history.go(-1);">
      <div class="outer">
        <div class="userBox">
          <div class="imgBox">
            <img src="__IMG__/user.png" alt="" class="roleImg" data-id="1">
            <img src="__IMG__/checkbox_yes.png" alt="" class="chooseImg">
          </div>
          <div class="roleName bluee">用户</div>
        </div>
        <div class="userBox">
          <div class="imgBox">
            <img src="__IMG__/manager.png" alt="" class="roleImg" data-id="2">
            <img src="__IMG__/checkbox_yes.png" alt="" class="chooseImg hidden">
          </div>
          <div class="roleName">经纪人</div>
        </div>
        <div class="userBox">
          <div class="imgBox">
            <img src="__IMG__/sheji.png" alt="" class="roleImg" data-id="3">
            <img src="__IMG__/checkbox_yes.png" alt="" class="chooseImg hidden">
          </div>
          <div class="roleName">设计师</div>
        </div>
      </div>
      <div class="btn gonext">确定</div>
    </div>
    <input type="hidden" id="role" value="1" />
    <div style="width:100%;margin:0 auto; padding:20px 0;background-color: #fff;position: absolute;bottom: 0;text-align: center;color: #939393;">
        <img src="__IMG__/aaa.png" style="float:right;margin-right: 100px;" height="80" />
        <br/>
        置家优选隶属于北京顺合科技服务有限公司，置家优选是一款专业的房源信息发布平台。一站式家居服务平台，让用户享受优质的居住服务体验！
        <br/>
        地址：北京市朝阳区广顺北大街33号院1号楼1101室
        <a target="_blank" href=" " style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="__IMG__/gongan.png" style="float:left;"/><p style="float:left;height:20px;line-height:20px;margin: 3px 0px 0px 5px; color:#939393;">京公网安备 11010502042473号</p></a>
    </div>
  </body>
  <script src="/static/admin/js/jquery.min.js"></script>
  <script type="text/javascript" src="__JS__/api.js"></script>
  <script type="text/javascript">
      $('.roleImg').click(function () {
          $('.chooseImg').addClass('hidden');
          $('.roleName').removeClass('bluee');
          $(this).siblings('img').removeClass('hidden');
          $(this).parent().next().addClass('bluee');
          //
          var type = $(this).attr('data-id');
          $('#role').val(type);
      });
    $('.gonext').click(function () {
        var type = $('#role').val();
        location.href='/home/Login/zhuce?type='+type;
    });
  </script>
  </html>
